+ body {position:absolute;top:0;right:0;bottom:0;left:0;margin:0;font-family:"Microsoft YaHei","sans-serif","Microsoft Sans Serif","Microsoft JhengHei UI";background:#fff6e6;color:gray}
|
|
|
13
|
+ img {width:100%}
|
|
|
14
|
+
|
|
|
15
|
+ /* For Download Section */
|
|
|
16
|
+ .download_section {position:fixed;right:0;bottom:0;left:0;height:55px;padding:5px;background:#f0f0f0;box-sizing:border-box}
|
|
|
17
|
+ .pai2_icon {width:45px;height:45px;float:left}
|
|
|
18
|
+ .pai2_icon>img {width:100%;height:100%}
|
|
|
19
|
+ .pai2_desc {height:45px;padding:5px 0 0 5px;float:left}
|
|
|
20
|
+ .pai2_name {padding-top:2px;font-size:14px;text-align:left}
|
|
|
21
|
+ .pai2_des {padding-top:2px;font-size:12px;line-height:23px;color:#8f8f8f;text-align:left}
|
|
|
22
|
+ .pai2_download {position:relative;top:5px;width:100px;height:35px;line-height:35px;text-align:center;background:#d13621;color:#fff;border-radius:5px;float:right}
|
|
|
23
|
+ /* For PC */
|
|
|
24
|
+ body, .download_section {
|
|
|
25
|
+ max-width: 414px !important;
|
|
|
26
|
+ margin: 0 auto !important;
|
|
|
27
|
+ }
|
|
|
28
|
+ </style>
|
|
|
29
|
+ </head>
|
|
|
30
|
+ <body>
|
|
|
31
|
+ <div class="container">
|
|
|
32
|
+ <article class="text-center">
|
|
|
33
|
+ {% for photo in photos %}
|
|
|
34
|
+ <div><img src="{{ photo.p_photo_url }}"></div>
|
|
|
35
|
+ {% endfor %}
|
|
|
36
|
+ </article>
|
|
|
37
|
+ </div>
|
|
|
38
|
+
|
|
|
39
|
+ <div id="download_section" class="download_section">
|
|
|
40
|
+ <div class="pai2_icon">
|
|
|
41
|
+ <img src="{% static 'pai2/img/paiai_96_96.png' %}">
|
|
|
42
|
+ </div>
|
|
|
43
|
+ <div class="pai2_desc">
|
|
|
44
|
+ <div class="pai2_name">拍爱</div>
|
|
|
45
|
+ <div class="pai2_des">即拍即分享</div>
|
|
|
46
|
+ </div>
|
|
|
47
|
+ <div id="pai2_download" class="pai2_download">立即下载</div>
|
|
|
48
|
+ </div>
|
|
|
49
|
+ </body>
|
|
|
50
|
+</html>
|